<template>
  <div>
    <div class="naodai" ref="naodai" v-show="y">
      <div class="head tou">
        <div class="login">
          <router-link to="/">
            <img src="../assets/1654871744407.png" alt="" />
          </router-link>
        </div>
        <div class="ss student">
          <div class="shixi">
            <div class="dropdown">
              <span>实习</span>
              <img class="icon" src="../assets/img/下载.png" alt="" />
              <ul class="ul_list">
                <li class="list-item">实习</li>
                <li class="list-item">校招</li>
                <li class="list-item">公司</li>
              </ul>
            </div>
            <div class="search-form">
              <input
                type="text"
                placeholder="请输入期望的实习岗位工资、公司"
                v-model="kw"
                @keyup.enter="goSerach"
              />
              <router-link :to="'/search/' + this.kw">搜索</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 侧边小图标 -->
    <div class="fixed-box">
      <div class="resume box-item">
        <img src="../assets/right-resume.46e1091.png" alt="" />
        <div class="text i">简历</div>
      </div>
      <div class="deliver box-item">
        <img src="../assets/toudi.png" alt="" />
        <div class="text">投递</div>
      </div>
      <div class="box-item">
        <img src="../assets/erji.png" alt="" />
        <div class="text">客服</div>
      </div>
      <div class="box-item box" ref="box" @click="goTop()" v-show="y">
        <img src="../assets/shangyiye.png" alt="" />
        <div class="text"><a href="#">TOP</a></div>
      </div>
    </div>
    <!-- <div
      class="tts"
    ></div> -->
    <!-- 搜索框 -->
    <div class="tts"></div>
    <!-- 搜索-->

    <div class="f1">
      <div class="shuzi">
        <!-- 这里的style到时候用vue编写当网页加载出来的时候再添加 -->
        <div class="shu">
          <span ref="s1"></span>
          <span ref="s2"></span>
          <span ref="s3"></span>
          <span ref="s4"></span>
          <span ref="s5"></span>
          <span ref="s6"></span>
          <span ref="s7"></span>
          <span ref="s8"></span>
        </div>
        <p>共计1882739个热门职位等着你</p>
      </div>
      <div class="ss">
        <div class="shixi">
          <div class="dropdown">
            <span>实习</span>
            <img class="icon" src="../assets/img/下载.png" alt="" />
            <ul class="ul_list">
              <li class="list-item">实习</li>
              <li class="list-item">校招</li>
              <li class="list-item">公司</li>
            </ul>
          </div>
          <div class="search-form">
            <input
              type="text"
              placeholder="请输入期望的实习岗位工资、公司"
              v-model="kw"
              @keyup.enter="goSerach"
            />
            <router-link :to="'/search/' + this.kw">搜索</router-link>
          </div>
        </div>
        <div class="hot">
          <span>热门搜索</span>
          <a href="#">市场</a>
          <a href="#">银行</a>
          <a href="#">财会</a>
          <a href="#">运营</a>
          <a href="#">新媒体</a>
          <a href="#">UI设计</a>
          <a href="#">行政</a>
          <a href="#">项目</a>
        </div>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="index_lunbo">
      <div class="index_lunbo_a">
        <div class="index_lunbo_a_a">
          <p>全部分类</p>
          <div>
            <img :src="`img/b${nn}.png`" @click="an" />
            <img :src="`img/b${nn1}.png`" @click="an1" />
          </div>
        </div>
        <div class="index_lunbo_a_b" :class="{ active: nn == 2 }">
          <div>
            <div>
              <a>互联网/IT</a><a>产业</a><a>运营</a><a>技术</a>
              <span></span>
            </div>
            <div class="index_lunbo_a_b_b_1">
              <ul>
                <li>
                  <a>产品</a><a>产品</a> <a>产品助理</a><a>用户研究</a>
                  <a>游戏策划</a><a>安全产品经理</a> <a>策略产品经理</a
                  ><a>电商产品经理</a><a>供应链产品经理</a> <a>软件产品经理</a
                  ><a>商业化产品经理</a> <a>数据产品经理</a><a>网页产品经理</a
                  ><a>增长产品经理</a> <a>移动产品经理</a><a>硬件产品经理</a
                  ><a></a> <a>金融产品经理</a><a>产品经理</a><a>产品设计</a>
                  <a>产品项目</a><a>管理</a><a>游戏</a>
                </li>
                <li>
                  <a>运营</a><a>运营产品</a><a>运营内容</a> <a>运营</a
                  ><a>网站编辑</a><a>客服</a> <a>SEO/SEM</a><a>电商运营</a
                  ><a>活动运营</a> <a>数据运营</a><a>社群运营</a
                  ><a>新媒体运营</a> <a>游戏运营</a><a>海外运营</a
                  ><a>品类运营</a> <a>COO网站运营</a><a>编辑</a>
                </li>
                <li>
                  <a>技术</a><a>技术</a><a>测试</a> <a>前端</a><a>IT运维</a
                  ><a>数据库</a> <a>算法</a><a>数据挖掘</a><a>云计算/大数据</a>
                  <a>后端技术</a><a>管理</a> <a>移动开发</a><a>通信技术</a
                  ><a>信息安全</a><a>销售技术支持</a> <a>数据分析</a
                  ><a>架构师</a>
                </li>
                <!--Node.jsPHPPythonRuby/PerlERPLinuxHadoopPLC -->
                <li>
                  <a>软件</a><a>软件</a><a>C#/.NET</a><a>Android</a> <a>C/C++</a
                  ><a>iOS</a><a>Java</a><a>Node.js</a> <a>PHP</a><a>Python</a
                  ><a>Ruby/Perl</a><a>ERP</a> <a>Linux</a><a>HadoopPLC</a>
                </li>
              </ul>
            </div>
          </div>
          <div>
            <div>
              <a>通信/硬件</a><a>电子电气</a><a>通信</a>
              <span></span>
            </div>
            <div class="index_lunbo_a_b_b_2">
              <ul>
                <li>
                  <a>电子电气</a><a>电子电气</a> <a>电气工程</a><a>电气设计</a
                  ><a>半导体/芯片</a> <a>电子工程</a><a>光电FAE</a> <a>IC验证</a
                  ><a>电磁</a><a>微电子</a> <a>电路电器/仪器/仪表硬件设备</a
                  ><a>制导</a> <a>生产/检测</a><a>测试/可靠性</a><a>版图设计</a>
                </li>
                <li>
                  <a>通信</a><a>通信</a><a>物联网</a> <a>射频</a><a>无线通信</a
                  ><a>电信交换</a> <a>电信网络</a><a>数据通信</a><a>通信测试</a
                  ><a>通信电源</a> <a>通信技术</a><a>通信设备</a><a>通信研发</a
                  ><a>移动通信</a>
                  <a>有线传输</a>
                  <a>网络/信息安全</a><a>光传输</a> <a>光通信</a><a>转播声学</a
                  ><a>5G核心网安防系统仿真应用激光/光电子技术</a>
                </li>
                <!-- 设计自动化/自动控制 -->

                <li>
                  <a>硬件</a><a>硬件</a> <a>嵌入式</a><a>集成电路</a
                  ><a>ARM开发</a> <a>DSP开发</a><a>FPGA开发</a><a>PCB工艺</a>
                  <a>PLC单片机</a><a>电路工程师</a><a>驱动开发</a>
                  <a>系统集成</a><a>热传导</a><a>维修模具</a> <a>设计</a
                  ><a>自动化/自动控制</a>
                </li>
              </ul>
            </div>
          </div>
          <div>
            <div>
              <a>设计/传媒</a><a>设计</a><a>广告展览</a>
              <span></span>
            </div>
            <div class="index_lunbo_a_b_b_3">
              <ul>
                <li>
                  <a>设计</a><a>设计</a><a>原画/插画</a> <a>后期/特效</a
                  ><a>平面设计</a><a>视觉设计</a> <a>网页/美工</a><a>2D/3D</a
                  ><a>UI/UE</a> <a>Flash</a><a>工业设计</a><a>美术设计</a>
                  <a>APP设计</a><a>交互设计</a><a>服饰设计</a> <a>会展设计</a
                  ><a>家居设计</a><a>陈列设计</a> <a>环境设计</a><a>游戏设计</a
                  ><a></a><a>场景设计</a> <a>动作设计</a><a>角色设计</a
                  ><a>游戏界面设计</a> <a>PS</a><a>珠宝设计</a><a>汽车设计</a>
                  <a>漫画师</a><a>像修图师</a><a>AD设计/制图包装设计</a>
                </li>
                <li>
                  <!-- 会展审核制作广告协调广告美术指导 -->
                  <a>广告展览</a><a>广告展览</a><a>策划</a> <a>AE创意</a
                  ><a>文案</a><a>广告设计</a> <a>会展审核</a><a>制作</a
                  ><a>广告协调</a><a>广告美术</a>
                  <a>指导</a>
                </li>
                <li>
                  <a>传媒</a><a>传媒</a><a>编导</a><a>记者</a> <a>主持/播音</a
                  ><a>摄影</a><a>影视媒体</a> <a>多媒体制作</a><a>化妆/造型</a
                  ><a>演艺</a> <a>剪辑/后期制片</a><a>编剧</a><a>编辑/创作</a>
                  <a>场控</a><a>摄像/制作</a><a>声乐</a><a>统筹/管理</a>
                  <a>字媒体</a><a>舞美</a>
                </li>
              </ul>
            </div>
          </div>
          <div>
            <div>
              <a>通用职能</a><a>行政</a><a>人力资源</a><a>财会</a>
              <span></span>
            </div>
            <div class="index_lunbo_a_b_b_4">
              <ul>
                <li>
                  <a>行政</a><a>行政</a><a>助理/秘书</a> <a>前台/接待</a
                  ><a>后勤</a><a>录入员</a> <a>商务司机</a><a>文员</a
                  ><a>档案管理</a><a>行政管理总助</a>
                </li>
                <li>
                  <a>人力资源</a><a>人力资源</a><a>企业文化</a>
                  <a>人事/HR招聘</a><a>猎头</a><a>HRBP</a> <a>绩效考核</a
                  ><a>培训薪资</a><a>福利员工</a><a>关系组织发展</a>
                </li>
                <li>
                  <a>财会</a><a>财会</a><a>财务</a> <a>会计/出纳</a><a>审计</a
                  ><a>税务</a> <a>成本风控</a><a>结算</a><a>总账会计</a
                  ><a>核销员</a> <a>注册会计师</a><a>资产管理</a><a>财务管理</a>
                </li>
              </ul>
            </div>
          </div>
          <div>
            <div>
              <a>金融/法务</a><a>金融</a><a>保险</a><a>银行</a>
              <span></span>
            </div>
            <div class="index_lunbo_a_b_b_5">
              <ul>
                <li>
                  <a>金融</a><a>金融</a><a>风控投资</a> <a>财务分析</a
                  ><a>理财顾问</a><a>分析师</a> <a>基金证券</a><a>证券分析师</a
                  ><a>信托/担保</a> <a>经济研究</a><a>互联网金融</a
                  ><a>期货融资</a><a>股票交易</a> <a>员权证</a><a>金融产品</a
                  ><a>资产评估</a> <a>并购</a><a>投后管理</a><a></a
                  ><a>客户服务</a> <a>操盘手</a><a>拍卖/典当/收藏鉴定</a>
                </li>
                <li>
                  <a>保险</a><a>保险</a><a>精算师</a> <a>保单业务</a
                  ><a>保险销售</a><a>保险内勤</a> <a>理财规划师</a
                  ><a>核保/理赔</a><a>保险契约</a> <a>管理保险</a><a>培训师</a
                  ><a>稽核/法律/合规</a>
                  <a>渠道及年金产品研发风险控制</a>
                </li>
                <li>
                  <!--资产管理银行同业商务渠道催收国际结算/外汇交易进出口/信用证结算 -->
                  <a>银行</a><a>银行</a><a>客户经理</a> <a>大堂经理</a
                  ><a>业务经理</a><a>部门经理</a> <a>贷款信贷</a><a>信审</a
                  ><a></a><a>信托</a> <a>信用卡</a><a>银行销售柜员</a
                  ><a>清算</a> <a>资产管理</a><a>银行同业商务</a
                  ><a>渠道催收</a> <a>国际结算/外汇交易</a
                  ><a>进出口/信用证结算</a>
                </li>
              </ul>
            </div>
          </div>
          <div>
            <div>
              <a>生产制造</a><a>制造</a><a>机械</a>
              <span></span>
            </div>
            <div class="index_lunbo_a_b_b_6">
              <ul>
                <li>
                  <!--装配/施工营运管理项目管理生产计划/物料控制 -->
                  <a>制造</a><a>制造</a><a>安全设备</a><a>生产质量</a>
                  <a>自动化工程师</a><a>工业设计</a><a>技术/工艺</a>
                  <a>原材料加工</a><a>生产跟单</a><a>体系管理</a>
                  <a>印刷/包装</a><a>运维/检修</a><a>装配/施工</a>
                  <a>营运管理</a><a>项目管理</a><a>生产计划/物料控制</a>
                </li>
                <li>
                  <a>机械</a><a>机械</a><a>机械设计</a> <a>机械设备</a
                  ><a>机械制造机</a><a>机械制图</a> <a>CNC/数控</a
                  ><a>冲压夹具</a><a>模具焊接</a> <a>注塑铸造/锻造锅炉</a
                  ><a>气动轨道交通</a><a>飞机设计与制造飞机维修/保养</a>
                  <a>列车设计与制造列车维修/保养</a
                  ><a>船舶设计与制造船舶维修/保养</a> <a>材料管理机</a
                  ><a>电汽车</a><a>机器人/人工智能</a>
                </li>
              </ul>
            </div>
          </div>
          <div>
            <div>
              <a>商务/贸易</a><a>公关媒介</a><a>市场商务</a>
              <span></span>
            </div>
            <div class="index_lunbo_a_b_b_7">
              <ul>
                <li>
                  <!--媒介投放会务会展策划经理 -->
                  <a>公关媒介</a><a>公关媒介</a><a>公关媒介活动</a>
                  <a>策划活动</a><a>执行品牌</a><a>品牌策划</a> <a>品牌合作</a
                  ><a>媒介顾问</a><a>媒介合作</a> <a>媒介投放</a><a>会务会展</a
                  ><a>策划经理</a>
                </li>

                <li>
                  <a>市场商务</a><a>市场商务</a><a>商务品牌</a> <a>渠道市场</a
                  ><a>企划招投</a><a>策划分析/调研</a> <a>APP推广</a
                  ><a>商务拓展</a><a>SEMSEO</a> <a>城市经理</a><a>活动策划</a
                  ><a>客户代表</a> <a>商品经理</a><a>商务渠道</a><a>市场策划</a>
                </li>
                <li>
                  <a>销售</a><a>销售</a><a>渠道/分销</a> <a>行销</a
                  ><a>电话销售</a><a>客服服务</a> <a>销售支持</a><a>推广销售</a
                  ><a>管理销售</a> <a>行政</a><a>广告销售</a><a>代理商销售</a>
                </li>
                <li>
                  <a>贸易</a><a>贸易</a><a>报关员</a><a>外贸专员</a>
                  <a>采购物流</a><a>供应链</a><a>仓储/库管</a> <a>跟单员</a
                  ><a>贸易专员</a><a>货运代理</a> <a>报关/报检</a><a>核销调度</a
                  ><a>交通/运输配送</a> <a>质量管理</a><a>外贸经理</a>
                </li>
              </ul>
            </div>
          </div>
          <div>
            <div>
              <a>教育培训</a><a>教学支持</a><a>教师</a><a>翻译</a>
              <span></span>
            </div>
            <div class="index_lunbo_a_b_b_8">
              <ul>
                <li>
                  <a>教学支持</a><a>教学支持</a><a>教务助教</a> <a>课程策划</a
                  ><a>课程顾问</a><a>课程教育</a><a>产品研发</a>
                  <a>教育行政</a>
                </li>
                <li>
                  <a>教师</a><a>教师</a><a>幼教</a><a>语文</a> <a>数学</a
                  ><a>外语</a><a>理科</a><a>文科</a> <a>艺术类</a><a>运动类</a
                  ><a>职业技术</a> <a>家教</a><a>小学教师</a><a>中学教师</a>
                  <a>讲师</a><a>教练</a><a>早教</a><a>考研</a> <a>科研/学术</a
                  ><a>留学辅导</a>
                </li>
                <li>
                  <a>翻译</a><a>翻译</a><a>日语</a><a>英语</a> <a>俄语</a
                  ><a>德语</a><a>法语</a><a>西语</a>
                  <a>其他语种</a>
                </li>
                <li>
                  <a>咨询</a><a>咨询</a><a>咨询/顾问</a> <a>调研员</a
                  ><a>培训咨询</a><a>数据分析</a><a>分析咨询</a> <a>项目管理</a
                  ><a>知识产权/专利/商标代理人</a>
                </li>
              </ul>
            </div>
          </div>
          <div>
            <div>
              <a>生物医疗</a><a>医疗护理</a><a>生物制药</a>
              <span></span>
            </div>
            <div class="index_lunbo_a_b_b_9">
              <ul>
                <li>
                  <a>医疗护理</a><a>医疗护理</a><a>护理</a> <a>内科</a
                  ><a>外科</a><a>专科</a><a>牙科</a> <a>心理/精神</a><a>中医</a
                  ><a>麻醉药剂师</a><a>兽医</a> <a>营养医生</a><a>医药护士</a
                  ><a>健康整形</a><a>临床保健</a>
                </li>
                <li>
                  <a>生物制药</a><a>生物制药</a><a>生物工程</a><a>临床研究</a>
                  <a>制药</a><a>医疗器械</a><a>医药类</a><a>生物生信</a>
                  <a>生化/药物临床数据</a><a>分析药品</a><a>生产药品</a>
                  <a>市场推广</a><a>药品注册</a><a>医药项目经理</a>
                </li>
                <li>
                  <a>化工</a><a>化工</a><a>化学分析</a> <a>化妆品</a
                  ><a>研发配色</a><a>技术实验室</a><a>技术食品/饮料</a>
                  <a>研发塑料工程师</a><a>涂料研发</a> <a>造纸研发</a
                  ><a>化工机械</a><a>精细化工器械耗材</a><a>石油石化</a>
                  <a>新材料/环保技术</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="index_lunbo_a_b" :class="{ active: nn == 1 }">
          <div class="index_lunbo_a_b_a_10">
            <div>
              <a>环境/资源利用</a><a>环保</a><a>能源</a>
              <span></span>
            </div>
            <div class="index_lunbo_a_b_b_10">
              <ul>
                <li>
                  <!--环境监测环境评价生态治理/规划水/废气/固废处理环境管理/景区保护 -->
                  <a>环保</a><a></a><a>环评师</a><a>环保检测</a> <a>污染处理</a
                  ><a>生态规划</a><a>环保工程</a> <a>环境监测</a><a>环境评价</a
                  ><a>生态治理/规划水/废气/固废处理</a>
                  <a>环境管理/景区保护</a>
                </li>
                <li>
                  <a>能源</a><a>能源</a><a>矿产</a><a>新能源</a> <a>核能</a
                  ><a>燃料/燃烧</a> <a>热力</a><a>水利</a><a>矿产/勘察</a>
                  <a>电池/电动</a><a>电网</a><a>电务/控制</a>
                  <a>动力发电/电机制冷</a><a>石油/石化</a> <a>地质/灾害</a
                  ><a>油气测绘/遥感地理</a><a>信息计量</a>
                  <a>掘业/冶炼</a>
                </li>
                <li>
                  <!-- 农牧渔林 农牧渔林草业/林木虫类研究畜牧农化农药农作物食品科学兽医渔业/水产园艺/生态 -->
                  <a>农牧渔林</a><a>农牧渔林</a><a>草业/林木</a> <a>虫类研究</a
                  ><a>畜牧</a><a>农化农药</a><a>农作物</a> <a>食品科学</a
                  ><a>兽医</a><a>渔业/水产</a>
                  <a>园艺/生态</a>
                </li>
                <li>
                  <!-- 材料 材料材料研发材料成型高新材料 -->
                  <a>材料</a><a>材料</a><a>材料研发</a> <a>材料成型</a
                  ><a>高新材料</a>
                </li>
                <li>
                  <!-- 快消耐用消费品贸易/进出口批发/零售汽车/零配件奢侈品/收藏品/工艺品/珠宝
                   -->
                  <a>消费品</a><a>消费品</a><a>办公用品</a> <a>服装/纺织/皮革</a
                  ><a>机械/设备/重工</a> <a>家具/家电/玩具/礼品</a
                  ><a>快消耐用消费品</a> <a>贸易/进出口</a><a>批发/零售</a
                  ><a>汽车/零配件</a>
                  <a>奢侈品/收藏品/工艺品/珠宝</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="index_lunbo_a_b_a_11">
            <div>
              <a>服务业</a><a>服务</a>
              <span></span>
            </div>
            <div class="index_lunbo_a_b_b_11">
              <ul>
                <li>
                  <a>服务</a><a>服务</a><a>食品餐饮</a><a>交通运输</a>
                  <a>美容保健</a><a>酒店旅游</a><a>百货零售</a> <a>体育运动</a
                  ><a>休闲娱乐</a><a>中介服务</a> <a>租赁服务</a
                  ><a>检测/认证</a> <a>活动/场控</a><a>宠物服务</a
                  ><a>婚礼/花艺</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="index_lunbo_a_b_a_12">
            <div>
              <a>房产/建筑</a><a>房地产</a><a>建筑装潢</a>
              <span></span>
            </div>
            <div class="index_lunbo_a_b_b_12">
              <ul>
                <li>
                  <!--物业经理物业客服物业维修项目经理消防置业顾问资料员保安招投标 -->
                  <a>房地产</a><a>房地产</a><a>房产销售</a> <a>物业管理</a
                  ><a>房产中介</a><a>地产开发/策划</a> <a>地产评估</a
                  ><a>房地产销售</a><a>房地产招商</a> <a>物业经理</a
                  ><a>物业客服</a><a>物业维修</a> <a>项目经理</a
                  ><a>消防置业顾问</a><a>资料员</a>
                  <a>保安招投标</a>
                </li>
                <li>
                  <a>建筑装潢</a><a>建筑装潢</a><a>建筑设计</a> <a>园林/景观</a
                  ><a>室内设计</a><a>建筑绘图员</a>
                  <a>模型设计/制作</a>
                </li>
                <li>
                  <a>市政工程</a><a>市政工程</a><a>城规/市政</a> <a>工程造价</a
                  ><a>给排水/通暖</a><a>测绘土木工程</a> <a>管理施工员</a
                  ><a>成本造价</a><a>安全管理</a><a>材料主管</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="index_lunbo_a_b_a_13">
            <div>
              <a>非盈利/其他</a><a>公共事业</a><a>管培生</a>
              <span></span>
            </div>
            <div class="index_lunbo_a_b_b_13">
              <ul>
                <li>
                  <a>公共事业</a><a>公共事业</a><a>志愿者</a> <a>政府</a
                  ><a>社会工作</a><a>NGO</a><a>公共管理</a>
                  <a>公共卫生疾病控制</a><a>公务员</a>
                </li>
                <li>
                  <a>管培生</a><a>管培生</a><a>储备干部</a><a>储备经理人</a>
                </li>
                <li>
                  <a>其它</a>
                  <a>其他</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="index_lunbo_a_b_a_14">
            <div>
              <a>不限</a><a>不限</a>
              <span></span>
            </div>
            <div class="index_lunbo_a_b_b_14">
              <ul>
                <li>
                  <a>不限</a>
                  <a>不限</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="index_lunbo_b">
        <div class="index_lunbo_b_a">
          <swiper
            @mouseover.native="stopSwiper"
            @mouseout.native="startSwiper"
            v-if="carousel"
            ref="swiper"
            class="swiper"
            :options="swiperOptions"
          >
            <swiper-slide v-for="{ img, jid } in carousel.data" :key="jid">
              <img :src="imgBase + img" alt="" />
            </swiper-slide>
            <!-- 分页器 -->
            <div class="swiper-pagination" slot="pagination">
              <span class="my-bullet">汇丰计划</span>
              <span class="my-bullet">酷盖实习情报局</span>
              <span class="my-bullet">奔沪行动</span>
              <span class="my-bullet">暑假实习嘉年华</span>
            </div>
          </swiper>
          <div class="slide-text">
            <div class="d1">汇丰计划</div>
            <div class="d1">酷盖实习情报局</div>
            <div class="d1">奔沪行动</div>
            <div class="d1">暑假实习嘉年华</div>
          </div>
        </div>
        <div class="index_lunbo_b_b">
          <a href="http://chinacdc.zhiye.com/intern2021">
            <img src="img/建发集团.jpg" alt="" />
            <span>
              <p>建发集团</p>
              <p>暑假实习生</p>
            </span>
          </a>
          <a href="https://2022.yingjiesheng.com/HSBC/CSP.html">
            <img src="img/汇丰.png" alt="" />
            <span>
              <p>汇丰银行</p>
              <p>实习生招聘</p>
            </span>
          </a>
          <a href="https://www.shixiseng.com/com/com_rn5p8eyvmlhg">
            <img src="img/真格.jpg" alt="" />
            <span>
              <p>真格</p>
              <p>校园招聘</p>
            </span>
          </a>
          <a
            class="weibu"
            href="https://app.mokahr.com/campus_apply/human-horizons/45226?sourceToken=4459dfb029a8c9f44ac5ef2970dcd5bd#/"
          >
            <div>
              <img src="img/高合汽车.png" alt="" />
            </div>
            <span>
              <p>高台汽车</p>
              <p>2022校园招聘</p>
            </span>
          </a>
        </div>
      </div>
    </div>

    <div class="f3" v-if="data">
      <a
        :href="IP"
        class="shangjia"
        v-for="{ fid, img, subtitle, title, IP } in data.data"
        :key="fid"
      >
        <div class="com-logo">
          <!-- <img :src="imgBase + img" alt="" /> -->
          <el-image :src="imgBase + img" lazy></el-image>
        </div>
        <p class="com-name">{{ title }}</p>
        <div class="company-t company-common">{{ title }}</div>
        <div class="company-d company-common">{{ subtitle }}</div>
      </a>
    </div>

    <div class="f4">
      <a href="#" class="topic-box">
        <img
          src="../assets/img/202205201127405GyY1dukxgaI9Cf8m1.png"
          alt=""
          class="icon"
        />
        <span>暑期实习嘉年华</span>
      </a>
      <a href="#" class="topic-box">
        <img
          src="../assets/img/20220520112905Wf4px8gh0n1PBufF8e.png"
          alt=""
          class="icon"
        />
        <span>留学生优先暑期实习</span>
      </a>
      <a href="#" class="topic-box">
        <img
          src="../assets/img/20211126195415Ljn1xULTF64fuq0Jer.png"
          alt=""
          class="icon"
        />
        <span>北极星职通车，斩获心仪offer</span>
      </a>
    </div>

    <div class="f5">
      <div style="margin-right: 50px; background: #fafafa">
        <div
          v-for="(p, i) in shuju"
          class="intern-nav-item"
          :key="i"
          @click="op = i"
          :class="{ active: op == i }"
        >
          {{ p }}
        </div>
        <a href="#" class="intern-nav-more">查看更多职位 ></a>
      </div>
    </div>
    <div class="f6">
      <div class="f6_1" v-if="jobdata" :class="{ active: op == 0 }">
        <div
          class="intern-content-href"
          v-for="{
            jaddress,
            jcondition1,
            jcondition2,
            jcondition3,
            jid,
            jimg,
            jname,
            jrequest1,
            jrequest2,
            jsalary,
            jsubtitle,
            jtitle,
          } in jobdata.data.slice(0, 15)"
          :key="jid"
        >
          <div class="job-info">
            <div class="job-title clearfix">
              <div class="f-l lineHeight18">
                <router-link :to="'/details/' + jid" class="title">{{
                  jname
                }}</router-link>
                <img
                  src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/tag_hot.b0771d3.svg"
                  alt=""
                />
              </div>
              <span class="salary"> {{ jsalary }} </span>
            </div>
            <div class="job-tags clearfix">
              <div class="job-tags-text">{{ jcondition1 }}</div>
              <div class="job-tags-text">{{ jcondition2 }}</div>
              <div class="job-tags-text">{{ jcondition3 }}</div>
              <div class="job-tags-text job-tags-ellips">...</div>
            </div>
            <div class="job-detail job-detail-style clearfix">
              <span class="content">{{ jaddress }}</span>
              <span class="content">{{ jrequest1 }}</span>
              <span class="content">{{ jrequest2 }}</span>
            </div>
          </div>
          <div class="company-info">
            <a href="javascript:;" class="company-logo">
              <!-- <img :src="imgBase + jimg" alt="" /> -->
              <div class="demo-image__lazy">
                <el-image :src="imgBase + jimg" lazy></el-image>
              </div>
            </a>
            <div class="company-title">
              <a class="company-name" href="javasrcript:;">{{ jtitle }}</a>
            </div>
            <div class="company-detail clearfix">
              <span>{{ jsubtitle }} </span>
            </div>
          </div>
        </div>
      </div>
      <div class="f6_1" v-if="jobdata" :class="{ active: op == 1 }">
        <div
          class="intern-content-href"
          v-for="{
            jaddress,
            jcondition1,
            jcondition2,
            jcondition3,
            jid,
            jimg,
            jname,
            jrequest1,
            jrequest2,
            jsalary,
            jsubtitle,
            jtitle,
          } in jobdata.data.slice(5, 20)"
          :key="jid"
        >
          <div class="job-info">
            <div class="job-title clearfix">
              <div class="f-l lineHeight18">
                <router-link :to="`/details/` + jid" class="title">{{
                  jname
                }}</router-link>
                <img
                  src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/tag_hot.b0771d3.svg"
                  alt=""
                />
              </div>
              <span class="salary"> {{ jsalary }} </span>
            </div>
            <div class="job-tags clearfix">
              <div class="job-tags-text">{{ jcondition1 }}</div>
              <div class="job-tags-text">{{ jcondition2 }}</div>
              <div class="job-tags-text">{{ jcondition3 }}</div>
              <div class="job-tags-text job-tags-ellips">...</div>
            </div>
            <div class="job-detail job-detail-style clearfix">
              <span class="content">{{ jaddress }}</span>
              <span class="content">{{ jrequest1 }}</span>
              <span class="content">{{ jrequest2 }}</span>
            </div>
          </div>
          <div class="company-info">
            <a href="javascript:;" class="company-logo">
              <!-- <img :src="imgBase + jimg" alt="" /> -->
              <div class="demo-image__lazy">
                <el-image :src="imgBase + jimg" lazy></el-image>
              </div>
            </a>
            <div class="company-title">
              <a class="company-name" href="javasrcript:;">{{ jtitle }}</a>
            </div>
            <div class="company-detail clearfix">
              <span>{{ jsubtitle }} </span>
            </div>
          </div>
        </div>
      </div>
      <div class="f6_1" v-if="jobdata" :class="{ active: op == 2 }">
        <div
          class="intern-content-href"
          v-for="{
            jaddress,
            jcondition1,
            jcondition2,
            jcondition3,
            jid,
            jimg,
            jname,
            jrequest1,
            jrequest2,
            jsalary,
            jsubtitle,
            jtitle,
          } in jobdata.data.slice(10, 25)"
          :key="jid"
        >
          <div class="job-info">
            <div class="job-title clearfix">
              <div class="f-l lineHeight18">
                <router-link :to="`/details/` + jid" class="title">{{
                  jname
                }}</router-link>
                <img
                  src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/tag_hot.b0771d3.svg"
                  alt=""
                />
              </div>
              <span class="salary"> {{ jsalary }} </span>
            </div>
            <div class="job-tags clearfix">
              <div class="job-tags-text">{{ jcondition1 }}</div>
              <div class="job-tags-text">{{ jcondition2 }}</div>
              <div class="job-tags-text">{{ jcondition3 }}</div>
              <div class="job-tags-text job-tags-ellips">...</div>
            </div>
            <div class="job-detail job-detail-style clearfix">
              <span class="content">{{ jaddress }}</span>
              <span class="content">{{ jrequest1 }}</span>
              <span class="content">{{ jrequest2 }}</span>
            </div>
          </div>
          <div class="company-info">
            <a href="javascript:;" class="company-logo">
              <!-- <img :src="imgBase + jimg" alt="" /> -->
              <div class="demo-image__lazy">
                <el-image :src="imgBase + jimg" lazy></el-image>
              </div>
            </a>
            <div class="company-title">
              <a class="company-name" href="javasrcript:;">{{ jtitle }}</a>
            </div>
            <div class="company-detail clearfix">
              <span>{{ jsubtitle }} </span>
            </div>
          </div>
        </div>
      </div>
      <div class="f6_1" v-if="jobdata" :class="{ active: op == 3 }">
        <div
          class="intern-content-href"
          v-for="{
            jaddress,
            jcondition1,
            jcondition2,
            jcondition3,
            jid,
            jimg,
            jname,
            jrequest1,
            jrequest2,
            jsalary,
            jsubtitle,
            jtitle,
          } in jobdata.data.slice(7, 22)"
          :key="jid"
        >
          <div class="job-info">
            <div class="job-title clearfix">
              <div class="f-l lineHeight18">
                <router-link :to="`/details/` + jid" class="title">{{
                  jname
                }}</router-link>
                <img
                  src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/tag_hot.b0771d3.svg"
                  alt=""
                />
              </div>
              <span class="salary"> {{ jsalary }} </span>
            </div>
            <div class="job-tags clearfix">
              <div class="job-tags-text">{{ jcondition1 }}</div>
              <div class="job-tags-text">{{ jcondition2 }}</div>
              <div class="job-tags-text">{{ jcondition3 }}</div>
              <div class="job-tags-text job-tags-ellips">...</div>
            </div>
            <div class="job-detail job-detail-style clearfix">
              <span class="content">{{ jaddress }}</span>
              <span class="content">{{ jrequest1 }}</span>
              <span class="content">{{ jrequest2 }}</span>
            </div>
          </div>
          <div class="company-info">
            <a href="javascript:;" class="company-logo">
              <!-- <img :src="imgBase + jimg" alt="" /> -->
              <div class="demo-image__lazy">
                <el-image :src="imgBase + jimg" lazy></el-image>
              </div>
            </a>
            <div class="company-title">
              <a class="company-name" href="javasrcript:;">{{ jtitle }}</a>
            </div>
            <div class="company-detail clearfix">
              <span>{{ jsubtitle }} </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="f7">
      <a href="#" class="intern-more">更多职位</a>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["uname", "imgBase"]),
  },
  methods: {
    // 鼠标进入时
    stopSwiper() {
      // console.log("我进来了！");
      // console.log(this.$refs.swiper);
      this.$refs.swiper.$swiper.autoplay.stop();
    },
    // 鼠标离开时
    startSwiper() {
      // console.log("我出来了！");
      this.$refs.swiper.$swiper.autoplay.start();
    },
    // 编程式跳转
    goSerach() {
      // console.log("$route:", this.$route);
      const target = `/search/${this.kw}`;
      if (this.$route.path != target) {
        this.$router.push(target);
      }
    },
    // 获取轮播图
    getCarousel() {
      this.$api.getCarousel().then((res) => {
        this.carousel = res;
      });
    },
    // 获取f6热门职位
    getJobdata() {
      this.$api.getJobdata().then((res) => {
        this.jobdata = res;
      });
      // const url = "v1/news/job";
      // this.axios.get(url).then((res) => {
      //   // console.log("f6数据：", res);
      //   this.jobdata = res.data;
      // });
    },
    // 获取f3公司
    getData() {
      this.$api.getData().then((res) => {
        this.data = res;
      });
      // const url = "v1/news/firm";
      // this.axios.get(url).then((res) => {
      //   // console.log(res);
      //   this.data = res.data;
      // });
    },
    // 点击箭头图片回到顶部
    goTop() {
      document.documentElement.scrollTop = document.body.scrollTop = 0;
    },
    handleScroll() {
      if (this.lock) return;
      let y = document.documentElement.scrollTop || document.body.scrollTop; //针对不同浏览器
      console.log(y);
      // this.$refs.naodai.style.display = y > 200 ? "block" : "none";
      // this.$refs.box.style.display = y > 200 ? "block" : "none";
      if (y > 200) {
        this.y = true;
      } else {
        this.y = false;
      }
      this.lock = true;
      setTimeout(() => {
        this.lock = false;
      }, 300);
    },
    // 轮播图左侧按钮点击切换
    an() {
      this.nn = 2;
      this.nn1 = 1;
    },
    an1() {
      this.nn = 1;
      this.nn1 = 2;
    },
    // 通过vuex里面存储的用户名获取用户的手机号头像
    // UNAME() {
    //   if (this.loginuname) {
    //     let url = `v1/users/juser?uname=${this.loginuname}`;
    //     this.axios.get(url).then((res) => {
    //       // console.log("用户名返回值", this.loginuname, res);
    //     });
    //   }
    // },
  },
  data() {
    return {
      dcur: 0,
      text: ["守沪专场", "暑期实习嘉年华", "汇丰计划", "实习情报局"],
      carousel: null,
      y: null,
      lock: false, //节流
      jobdata: null,
      data: null,
      kw: "",
      nn: 2,
      nn1: 1,
      op: 0,
      shuju: ["热门职位", "最新职位", "急招职位", "推荐职位"],
      swiperOptions: {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: true,
        },
        // 分页器
        pagination: {
          el: ".swiper-pagination", //小圆点
          clickable: true, //响应小圆点点击事件
          //修改分页器样式
          bulletClass: "my-bullet",
          //激活样式
          bulletActiveClass: "my-bullet-active",
        },
      },
    };
  },
  mounted() {
    this.getCarousel(); //获取轮播图
    this.getJobdata(); //获取f6热门职位
    this.getData(); //获取f3公司
    // this.UNAME();
    addEventListener("scroll", this.handleScroll, true); //添加滚动事件
    setTimeout(() => {
      this.$refs.s1.style.backgroundPosition = "0 -270px";
      this.$refs.s2.style.backgroundPosition = `0 -${
        30 * Math.ceil(Math.random() * 10)
      }px`;
      this.$refs.s3.style.backgroundPosition = `0 -${
        30 * Math.ceil(Math.random() * 10)
      }px`;
      this.$refs.s4.style.backgroundPosition = `0 -${
        30 * Math.ceil(Math.random() * 10)
      }px`;
      this.$refs.s5.style.backgroundPosition = `0 -${
        30 * Math.ceil(Math.random() * 10)
      }px`;
      this.$refs.s6.style.backgroundPosition = `0 -${
        30 * Math.ceil(Math.random() * 10)
      }px`;
      this.$refs.s7.style.backgroundPosition = `0 -${
        30 * Math.ceil(Math.random() * 10)
      }px`;
      this.$refs.s8.style.backgroundPosition = `0 -${
        30 * Math.ceil(Math.random() * 10)
      }px`;
    }, 0);
  },
};
</script>

<style lang="scss">
.swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
  height: 26px;
}
.swiper {
  position: relative;
  width: 800px;
  height: 300px;
  .swiper-pagination {
    position: absolute;
    bottom: 0px !important;
    left: 0;
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
  }
  .my-bullet {
    width: 200px;
    height: 44px;
    line-height: 44px;
    border-radius: 0%;
    color: white;
    z-index: 10;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .my-bullet-active {
    background-color: rgba(0, 0, 0, 0.9);
  }
}
</style>
<style scoped src="../assets/css/index.css">
</style>
